<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center style="margin-top: 20px">
      <el-step title="填写基础信息"></el-step>
      <el-step title="选择广告类型"></el-step>
      <el-step title="创建成功"></el-step>
    </el-steps>
    <!-- 1.广告详细信息 -->
    <base-info
        v-show="showStatus[0]"
        v-model="addInfo"
        @nextStep="nextStep"
        @getTaskDetail="getTaskDetail">
    </base-info>
    <!-- 3.上传图片，浏览效果，选择推广方式 -->
    <pic-upload
        v-show="showStatus[1]"
        v-model="addInfo"
        :addInfo="addInfo"
        @prevStep="prevStep"
        @finishCommit="finishCommit"
        @getTaskDetail="getTaskDetail">
    </pic-upload>
    <!-- 3.创建成功 -->
    <success
        v-show="showStatus[2]"
        v-model="addInfo"
        @nextStep="nextStep"
        @getTaskDetail="getTaskDetail">
    </success>
  </el-card>
</template>
<script>
import BaseInfo from './components/AdBaseInfo.vue';
import PicUpload from './components/AdPicUpload.vue';
import Success from './components/SuccessPage.vue'
import axios from "axios";
export default {
  name: 'AddDetail',
  components: { BaseInfo,PicUpload,Success},
  data() {
    return {
      active: 0,
     // taskParam: Object.assign({}, defaultTaskParam),
      showStatus: [true, false, false],
      addInfo:{
        title:'',
        dateRange:'',
        description:'',
        nativePlace:"",
        collegeId:"",
        gender:"",
        adType:0,
        imageUrl:[],
        detailUrl:[]
      }
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    getTaskDetail(item){
      console.log('我调用了getTaskDetail',item);
      Object.assign(this.addInfo, item);
      console.log('我接收到了TaskDetail',this.addInfo);
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      console.log('我调用了nextStep');
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit() {
      let formData = new FormData();
      this.addInfo.imageUrl.forEach((file) => {
        formData.append("imageFile", file.raw);
      });
      if(this.addInfo.adType==1){
        this.addInfo.detailUrl.forEach((file) => {
          formData.append("detailFile", file.raw);
        });
      }else {
        this.addInfo.imageUrl.forEach((file) => {
          formData.append("detailFile", file.raw);
        });
      }

      let addData = this.addInfo;
      formData.append("addData", JSON.stringify(addData)); // 将 addData 添加到 formData 中
      let tip;
      if(this.addInfo.adType==1){
        tip = `确定提交广告吗?`;
      } if(this.addInfo.adType==2){
        tip = `该广告预计推送给${this.addInfo.selectedStudent}人，确定提交吗?`;
      }
      this.$confirm(tip,  '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/adManage/addAd', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          if (response.status === 200) {
            this.nextStep();
            setTimeout(() => {
              location.reload();
            }, 2 * 1000);
          }
        });
      });
    },

  }
}
</script>
<style scoped>

</style>